﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Head {
    <script type="text/javascript" src="~/Scripts/jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-extend.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.10.3.min.js"></script>
    <link rel="stylesheet" href="~/Content/themes/ui-lightness/jquery-ui-1.10.3.custom.min.css" />
    <link rel="stylesheet" href="~/Content/themes/toolbar/jquery-toolbar.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            var options = new Array({ "text": "New", "img": "/Images/new.gif", "type": "button", "disabled": false },
                { "text": "", "img": "", "type": "separator" },
                { "text": "", "img": "/Images/open.gif", "type": "button", "disabled": false },
                { "text": "", "img": "/Images/save.gif", "type": "button", "disabled": false },
                {
                    "text": "", "img": "/Images/redo.gif", "type": "button", "event": function () {
                    }, "disabled": false
                }, {
                    "text": "", "img": "/Images/undo.gif", "type": "button", "event": function () {
                    }, "disabled": false
                }, { "text": "", "img": "", "type": "separator" });

            $("#toolbar").toolbar(options);

            $("#design-box").tabs();
        });
    </script>
}

<div id="toolbar"></div>

<table class="page-container">
    <tbody>
        <tr>
            <td style="width: 15%;">
                <div id="control-box" class="box">
                    <div class="box-title">
                        <span>工具箱</span>
                    </div>
                    <div id="control-box-panel" class="container">
                        <div class="section">
                            <ul id="controls">
                                <li class="text">
                                    <a href="#non">文本</a>
                                </li>
                                <li class="line">
                                    <a href="#non">线条</a>
                                </li>
                                <li class="table">
                                    <a href="#non">表格</a>
                                </li>
                                <li class="picture">
                                    <a href="#non">图片</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </td>
            <td style="width: 70%;">
                <div id="design-box" class="box">
                    <ul>
                        <li><a href="#tabs-1">Document 1</a></li>
                        <li><a href="#tabs-2">Document 2</a></li>
                        <li><a href="#tabs-3">Document 3</a></li>
                    </ul>
                    <div id="tabs-1" contenteditable="true"><p>123</p></div>
                    <div id="tabs-2"></div>
                    <div id="tabs-3"></div>
                </div>
            </td>
            <td style="width: 15%;">
                <div id="property-box" class="box">
                    <div class="box-title">
                        <span>属性</span>
                    </div>
                </div>

                <div class="container"></div>
            </td>
        </tr>
    </tbody>
</table>
